<template>
	<el-row>
		<el-col :span="16" :offset="4">
			<el-tabs v-model = "tabValue" type="border-card">
				<el-tab-pane label="查看" name="check">
					<el-row>
						<el-col :span="24">
							<el-input
								v-model="currentDoc.odContent"
								:rows="20"
								type="textarea"
								readonly=true;
								placeholder="Please input"
								style="height:350px;overflow-y: scroll;"
								resize="none"
							/>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="编辑" name="edit">
					<el-row>
						<el-col :span="8">
							<el-select v-model="docTemplateValue" @change="changeTemplate" class="m-2" placeholder="请选择公文模板..." size="large">
								<el-option
									v-for="item in docTemplates"
									:key="item"
									:label="item.odName"
									:value="item.odId"
								/>
							</el-select>
						</el-col>
						<el-col :span="24">
							<el-input
								v-model="currentDoc.odContent"
								:rows="20"
								type="textarea"
								placeholder="Please input"
								style="height:350px;overflow-y: scroll;"
								resize="none"
								@input="change()"
							/>
						</el-col>
						<br />
						<el-col :span="4" :offset="10">
							<el-button @click="UpdateOrAddDoc" style="width: 100%;">提交</el-button>
						</el-col>
						
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</el-col>
	</el-row>
</template>

<script>

import qs from 'qs'
import {ElMessage} from 'element-plus'
import { ref } from 'vue'
export default{
	data () {
		return {
			tabValue:"check",
			editable:true,
			docTemplates:[],
			currentDoc:{},
			docTemplateValue:ref(''),
			docContent:""
		}
	},
	methods:{
		dateFormat(time) {
			var date=new Date(time);
			var year=date.getFullYear();
			/* 在日期格式中，月份是从0开始的，因此要加0
			* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			* */
			var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
			// 拼接
			return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
		},
		switchChatObject(tab) {
			console.log(tab.props.name);
		},
		change(){
			this.$forceUpdate();
		},
		changeTemplate(){
			for(let i = 0;i<this.docTemplates.length;i++){
				if(this.docTemplates[i].odId == this.docTemplateValue){
					this.currentDoc = this.docTemplates[i]
				}
			}
			console.log(this.currentDoc);
			
		},
		UpdateOrAddDoc(){
			if(this.editable){
				//员工插入
				let curDoc = this.currentDoc;
				curDoc.odId=0
				curDoc.odName=this.currentDoc.odName.slice(0,this.currentDoc.odName.length-2)
				curDoc.odFlag=2
				curDoc.odStates = "已提交"
				curDoc.pId = this.currentDoc.pid
				curDoc.eId = this.$store.state.loginEmployee.eid
				console.log(this.currentDoc)
				let that = this
				let str = qs.stringify(curDoc)
				this.$axios.get("http://localhost:8080/ODoc/insertODocOne?"+str,{
					params:{
						officialdocument:that.currentDoc,
					}
				}).then(function(res){
					if(res.data==true){
						ElMessage({
							message:"提交成功！",
							type:'success',
						})
						that.tabValue="check"
					}else{
						ElMessage.error("提交失败！")
					}
				})
			}else{
				//员工更新
				let that = this
				let str = qs.stringify(that.currentDoc)
				this.$axios.get("http://localhost:8080/ODoc/updateODocByOdId?"+str,{
					params:{
						officialdocument:str,
					}
				}).then(function(res){
					if(res.data==true){
						ElMessage({
							message:"提交成功！",
							type:'success',
						})
						that.tabValue="check"
					}else{
						ElMessage.error("提交失败！")
					}
				})
			}
		},
	},
	mounted() {
	//显示当前日期时间
		let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
		this.timer = setInterval(() => {
			_this.date = new Date(); // 修改数据date
		}, 1000)
	},
	beforeUnmount() {
		if (this.timer) {
			clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
		}
	},
	created(){
		let that = this
		//初始化登录员工选项
		this.$axios.get("http://localhost:8080/E/selectEOneByEId",{
			params:{
				eId:that.$store.state.eId,
			}
		}).then(function(res){
			console.log(res.data)
			that.$store.state.loginEmployee = res.data
		})
		let odId = that.$route.params.odId
		//let odId=this.$router.params.odId
		if(odId!=null){
			this.editable = false;
			//取消修改模板类型
			this.$axios.get("http://localhost:8080/ODoc/selectODocOneByOdId?odId="+odId).then(function(res){
				console.log(res.data)
				that.currentDoc = res.data
			})
		}
		else{
			this.editable = true;
			this.$axios.get("http://localhost:8080/ODoc/selectODocListByOdFlag",{
				params:{
					odFlag:2,
				}
			}).then(function(res){
				console.log(res.data)
				that.docTemplates = res.data
			})
			//运行修改模板类型
		}
	}
}
</script>
